<template>
<div class="next">
  <div class="title">
    <p>

      <img src="../img/backtwo.png" alt="" >

      <span class="text">手机号验证</span>

    </p>

  </div>
  <div class="telyzm">
    <p>
      你的手机号：+86
      <span>{{tlenum}}</span>
    </p>
    <p>
      你会收到一条带有验证码的短信，请输入验证码
    </p>
  </div>
  <div class="input">
    <input type="text" v-for="(key,item) in inputarr" ref="inp" maxlength="1" @click="shownum">
    <p>{{timer}}</p>
  </div>
  <van-number-keyboard
    v-model="valueNum"
    :show="show"
    extra-key="."
    close-button-text="完成"
    @blur="show=false"
    @input="fous"
    @delete="onDelete"
  />
</div>
</template>

<script>
    export default {
        name: "next",
      data(){
          return{
            inputarr:[0,1,2,3],
            value:'',
            valueNum:'',
            i:0,
            j:3,
            picFocusStatus:false,
            show:true,
            valuearr:[],
            timer:60,
          }
      },
      methods:{
          shownum(){
            this.show=true;
          },
        fous(values){
          if(this.valuearr.length > 3){
            return
          }
          this.valuearr.push(values);
            for(let i = 0 ; i < 4; i ++){
              if(this.valuearr[i]=== undefined){
                this.$refs.inp[i].value = '';
              }else {
                this.$refs.inp[i].value = this.valuearr[i];
              }
            }
            if(this.$refs.inp[3].value.length <= 0){
              return
            }
            if(this.timer < 0){

              return
            }
            let yam = this.valuearr.join('');
            this.$http.get(`/api/captcha/verify?phone=${this.$route.query.tel}&captcha=${yam}`)
              .then((res)=>{
                console.log(res);
                this.$http.get(`/api/register/cellphone?phone=${this.$route.query.tel}&password=${this.$route.query.pwd}&captcha=${yam}&nickname=wqqqsqsbssinary1345`)
                  .then((res)=>{
                    console.log(res);
                    this.$toast('注册成功');
                  })
                  .catch((err)=>{
                    this.$toast('验证码错误');
                  })
              })
        },
        onDelete(){

          this.valuearr.splice(this.valuearr.length-1,1);
          console.log(this.valuearr);
          for(let i = 0; i < 4; i ++){
            if(this.valuearr[i]=== undefined){
              this.$refs.inp[i].value = '';
            }else {
              this.$refs.inp[i].value=this.valuearr[i];
            }

          }
        },
        djs(){
          let clock = window.setInterval(() => {
            this.timer--;
          },1000)
        }
      },

      computed:{
          tlenum(){
          return this.$route.query.tel.replace(this.$route.query.tel.substring(3,7),"****");
        },

      },
    mounted(){
          this.$refs.inp[0].focus();
          this.djs();
    }
    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
  .next{
    width: 1245px;
    .title{
      height: 190px;
      position: relative;
      background-color: #c54a3d;
      p{
        width: 100%;

        padding-top: 50px;
        box-sizing: border-box;
        img{
          position: absolute;
          bottom: 33px;
          width: 70px;
          object-fit: cover;

        }
        .text{
          position: absolute;
          display: inline-block;
          color: white;
          font-weight: bold;
          font-size: 50px;
          left: 50%;
          bottom: 40px;
          transform: translateX(-50%);

        }
      }
    }
    .telyzm{
      margin: 70px 0 0 118px;
      p{
        font-size: 40px;
        color: #969798;
      }
    }
    .input{
      margin-top: 110px;
      text-align: center;
      padding-left: 118px;
      padding-right: 23px;
      box-sizing: border-box;
      input{
        width: 180px;
        border: none;
        border-bottom: 10px solid #e2e2e3;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        margin-right: 95px;
        text-align: center;
        font-size: 50px;
        font-weight: unset;

      }
      p{
        text-align: right;
        margin-right:95px ;
        font-size: 45px;
        padding-top: 35px;
        color: #e2e2e3;
      }
    }
  }
</style>
